
<template>
	<view class="musicDetail">
		<img :src="song.al.picUrl" alt="" class="bac"/>
		<div :style="{height: `${navBarHeight}px` }"></div>
		<div class="return" @click="Return()"><uni-icons type="left" size="30"></uni-icons></div>
		<view class="">
			<div class="Top">
			        <div class="Top_left">
			            <div @click="changeShow(false)"><span class="icon-arrow-left2"></span></div>
			            <div>
			              <div class="songName"><marquee direction="right" scrollamount="1">{{playList[index].name}}</marquee></div>
			              <div class="songer"><span v-for="(item,index) in playList[index].ar" :key="index">{{item.name}}&nbsp;</span></div>
			            </div>
			        </div>
			        <div class="Top_right"><div><span class="icon-cogs"></span></div></div>
			    </div>
			    <div class="Body" @click="isLyricShow=!isLyricShow">
			      <div class="motion_picture" v-show="isLyricShow">
			      <img class="needle" :class="{needle_active:!isShow}" src="https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=" alt="">
			      <img class="disk" src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200" alt="">
			      <img class="disk_img" :class="{disk_img_active:!isShow,disk_img_pause:isShow}"  :src="playList[index].al.picUrl" alt="">
			      </div>
			      <div class="lyric" v-show="!isLyricShow" >
			        <p v-for="(item,index) in myLyric" :key="index" :class="{p_active:(currentTime*1000<item.pre&&currentTime*1000>=item.time)}">{{item.lrc}}</p>
			      </div>
			    </div>
			    <div class="Bottom">
			      <div class="icoList">
			        <div><span class="icon-heart"></span></div>
			        <div><span class="icon-download"></span></div>
			        <div><span class="icon-cool2"></span></div>
			        <div><span class="icon-bubble"></span></div>
			        <div><span class="icon-spinner"></span></div>
			      </div>
			      <div class="progress_bar">
			        <input type="range" min="0" :max="duration" v-model="currentTime" step="0.05">
			      </div>
			      <div class="play_function">
			        <div class="model"><span class="icon-loop2">1</span></div>
			        <div class="previous" @click="be_last"><span class="icon-previous">2</span></div>
			        <div class="play" @click="isPlay"><span class="icon-play1" v-if="isShow">3</span><span class="icon-pause" v-if="!isShow">4</span></div>
			        <div class="next" @click="be_next"><span class="icon-next">5</span></div>
			        <div class="list"><span class="icon-list-numbered">6</span></div>
			      </div>
				  
			</div>
		</view>
	</view>
</template>

<script>
	import {musicUrl} from '../../config.js'
	import {mapState,mapMutations, mapActions} from 'vuex';
	export default {
		data() {
			return {
				navBarHeight: 0,
				id: 0,
				playList: [],
				isLyricShow: true,
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.navBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.id = option.id
			this.getSongInfo(this.id)
		},
		 watch: {
		      currentTime() {
		        let p=document.querySelector('.p_active');
		        //console.log(p);
		        if(p&&p.offsetTop>300) {
		          document.querySelector('.lyric').scrollTop=p.offsetTop-300;
		        }
		      }
		},
		computed: {
			 ...mapState(['playList','index','isShow','lyric','lyricArr','currentTime','duration']),
		      myLyric() {
		        let arr;
		        if(this.lyric) {
		            arr=this.lyric.split(/[(\n\r)\r\n]+/).map(item=>{
		              let min=item.slice(1,3);
		              let sec=item.slice(4,6);
		              let mill=item.slice(7,10);
		              let lrc=item.slice(11);
		              let time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
		              if(isNaN(Number(mill))){
		                mill=item.slice(7,9);
		                lrc=item.slice(10);
		                time=parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill);
		              }
		              //console.log(min,sec,mill,lrc);
		              return {min,sec,mill,lrc,time};
		            })
		            arr.forEach((item,i) => {
		              if(i===arr.length-1) item.pre=0;
		              else item.pre=arr[i+1].time;
		            });
		        }
		        return arr;
		      }
		},
		methods: {
			Return() {
				console.log('return')
				uni.navigateBack({
					delta: 1
				});
			},
			//获取歌曲信息
			async getSongInfo(id) {
				await uni.request({
					url: musicUrl + `/song/detail?ids=` + id,
					success: (res) => {
						this.song = res.data.songs[0]
						console.log(this.song.al.picUrl)
					}
				})
			},
		}
	}
</script>

<style scoped>
	.musicDetail {
		width: 100%;
		max-height: 100%;
	}
	.return {
		margin-left: 10px;
		padding: 5px;
	}
	
	.bac {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		filter: blur(30px);
	}
	
	
	
	.musicdetail {
	  padding: 10px;
	}
	.Top {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.Top_left>div:nth-child(1) {
	  float: left;
	  font-size: 25px;
	  color: #fff;
	}
	.Top_left>div:nth-child(2) {
	  float: left;
	  margin-left: 20px;
	}
	.songName {
	  color: #fff;
	}
	.songer {
	  opacity: .7;
	  font-size: 12.5px;
	}
	.Top_right {
	  font-size: 25px;
	  color: #fff;
	}
	.motion_picture {
	  width: 100%;
	  height: 450px;
	  display: flex;
	  position: relative;
	  align-items: center;
	  flex-direction: column;
	}
	.needle {
	  width: 115px;
	  height: 150px;
	  position: absolute;
	  left: 46%;
	  transform-origin: 0 0;
	  transform: rotate(-10deg);
	  transition: all 2s;
	}
	.needle_active {
	  width: 115px;
	  height: 150px;
	  position: absolute;
	  left: 46%;
	  transform-origin: 0 0;
	  transform: rotate(2deg);
	  transition: all 2s;
	}
	.disk {
	  width: 250px;
	  height: 250px;
	  position: absolute;
	  bottom: 115px;
	  z-index: -1;
	}
	.disk_img {
	  width: 160px;
	  height: 160px;
	  border-radius: 50%;
	  position: absolute;
	  bottom: 157px;
	  animation: rotate_img 10s linear infinite;
	}
	.disk_img_active {
	  animation-play-state: running;
	}
	.disk_img_pause {
	  animation-play-state: paused;
	}
	@keyframes rotate_img {
	  0%{
	    transform: rotate(0deg);
	  }
	  100%{
	    transform: rotate(360deg);
	  }
	}
	.lyric {
	  width: 100%;
	  height: 450px;
	  overflow: scroll;
	  margin-top: 10px;
	}
	.lyric p {
	  text-align: center;
	  color: #fff;
	  margin: 20px auto;
	  opacity: .7;
	}
	.p_active {
	  font-size: 30px;
	  opacity: 1!important;
	}
	
	.icoList {
	  position: fixed;
	  width: 100%;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  font-size: 25px;
	  color: #fff;
	  opacity: .7;
	  left: 0;
	  bottom: 115px;
	}
	.play_function {
	  position: fixed;
	  padding: 10px;
	  width: 100%;
	  height: 70px;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  font-size: 25px;
	  color: #fff;
	  opacity: .7;
	  bottom: 0;
	  left: 0;
	}
	.play {
	  font-size: 45px;
	}
	.progress_bar {
	  position: fixed;
	  bottom: 75px;
	  left: 0;
	  width: 100%;
	  padding: 0 10px;
	}
	.progress_bar input {
	  width: 100%;
	}
</style>